<script setup lang="ts">

import ChildBoth from "@/Components/ChildBoth.vue";
import SongBottom from "../Components/SongBottom.vue";
import LeftList from "../Components/LeftList.vue";
import UndoRedoSearch from "../Components/UndoRedoSearch.vue";
import RightUserPhoto from "../Components/RightUserPhoto.vue";
import RecommendSvg from "@/svg/RecommendTitleSvg.vue";
import SongList from "@/Components/SongList.vue";
import router from "@/Router";
import {ref} from "vue";

let username = localStorage.getItem("username")
const sendPlayListTab = (index:number) => {
  let recObject = ref({
    rec:""
  })
  if(index==1){
    recObject.value.rec="最热歌曲"
    router.push({
      path:"/hot_listen_count_rec",
      query: recObject
    })
  }
  if(index==4){
    recObject.value.rec="为你推荐"
    router.push({
      path:"/item_rec",
      query: recObject
    })
  }
}

const pageName = "RecommendPage"

</script>

<template>
  <div class="fixed   w-200 h-45  pic z--1 top-20 left-160 opacity-23"></div>

  <child-both></child-both>
  <song-bottom class="pl-30 pr-35" :pageName="pageName"></song-bottom>
  <div class="body flex">
    <left-list></left-list>
    <div class="main grow h-200 flex flex-col overflow-auto pb-15 mx-3 ">
      <undo-redo-search></undo-redo-search>
      <div class="mt-17 h-auto flex-col ml-5">
        <div class="flex-col h-auto gap-y-4 text-xl">
          <RecommendSvg class="w-30 h-auto"></RecommendSvg>
          <div class="flex items-center">
            <img class="h-15 w-auto" src="../img/t-嗨，.png"/>
            <div class="text-2xl font-bold ">{{username}}</div>
            <img class="h-15 w-auto" src="../img/t-今日为你推荐.png"/>
          </div>
          <div class="h-40 w-full mt-2 flex items-center justify-between px-7">
            <div @click="sendPlayListTab(1)"
                 class="flex w-100 h-full p-4 bg-cyan-3  hover:bg-cyan-3 bg-opacity-60 rounded-2xl">
              <div class="text-white">最热歌曲</div>
            </div>

            <div @click="sendPlayListTab(2)"
                 class="flex w-54 h-full p-4 bg-blue-3 hover:bg-blue-3 bg-opacity-60 rounded-2xl">
              <div class="text-white">最热歌手</div>
            </div>
            <div @click="sendPlayListTab(3)"
                 class="flex w-54 h-full p-4 bg-purple-3 hover:bg-purple-3 bg-opacity-60 rounded-2xl">
              <div class="text-white">最火专辑</div>
            </div>

            <div @click="sendPlayListTab(4)"
                 class="flex w-54 h-full p-4 bg-pink-2 hover:bg-pink-2 bg-opacity-60 rounded-2xl">
              <div class="text-white">为你推荐</div>
            </div>
          </div>
        </div>
      </div>
      <div class="second-title mt-10 mb-2 ml-5">
        <img src="../img/t-心动曲目.png" class="h-7 ">
      </div>
      <song-list class="px-10 ml-2" :pageName="pageName"></song-list>
    </div>
    <right-user-photo></right-user-photo>
  </div>
</template>

<style scoped>
div::-webkit-scrollbar {
  display: none;
}
.pic {
  /*此三个样式组合，可以保证背景图片充满整个容器. 貌似单独写在组件的style里面不生效。*/
  background-image: url(../img/child-six.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
</style>